const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // entry用来配置入口文件
    entry: './src/index.js',

    // output用来配置打包后的文件存放情况
    output: {
        filename: 'bundle.js', //filename为打包好的js文件名
        path: path.resolve(__dirname, './dist'), //这里是nodejs的基础，不做讲解
        clean: true, //clean设置为true即可在每次打包之前将上次打包生成的文件夹清掉
        assetModuleFilename: 'images/[contenthash][ext]', //assetModuleFilename设置打包后静态资源文件的路径以及文件名, 但是我们不可能给所有的静态文件都叫同一个名字，所以要使用webpack提供的[contenthash]生成一个唯一标识,[ext]为文件原本的扩展名
    },
    // mode为当前项目的模式，development为开发模式
    mode: 'development',
    devtool: 'inline-source-map',

    // plugins用来配置你使用webpack的过程中用到的插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html', //template为html模板文件
            filename: 'app.html', //打包后的html文件的名字
            inject: 'body', //打包后的js文件在该html文件中引入的位置，body或head
        })
    ],

    // 想要让webpack支持更多类型的文件，需要配置这个module属性
    module: {
        // rules为规则列表，写一个数组，里面每个对象就是对于某种文件单独的配置
        rules: [
            /*
                test为文件的名字格式，一般使用正则写出文件的后缀名
                type一共有四种
                    - asset/resource 文件的路径
                    - asset/inline  文件的dataURI
                    - asset/source
                generator用于对于
            */
            {
                test: /\.png$/,
                type: 'asset/resource',
                //这里的generator优先级是高于output里面的assetModuleFilename的
                generator: {
                    filename: 'images/[contenthash][ext]'
                }
            },
            {
                test: /\.svg$/,
                type: 'asset/inline',
                generator: {
                    filename: 'svgs/[contenthash][ext]'
                }
            },
            {
                test: /\.txt$/,
                type: 'asset/source',
                generator: {
                    filename: 'txts/[contenthash][ext]'
                }
            }
        ]
    },

    devServer: {
        static: './dist', //static代表需要热部署的静态文件夹
    }
}